<template>
  <div class="main">
    <div class="top">
      <div class="left">
        <div class="titleWarp">
          <div class="title">{{query.rnaType}}</div>
          <img class="arrow" :src="require(`@/assets/image/home/arrow.svg`)"/>
        </div>
      </div>

      <div class="right">
        <div class="warp">
          <div class="sideWarp">
            <div class="title">Baltimore classification :</div>
          </div>
          <div class="tagWarp">
            <div :class="['tag', n.select ? 'active':'']" v-for="(n, idx) in groupList" :key="idx" @click="searchClick(n, 'viralGroup')">{{n.name}}</div>
          </div>
        </div>

        <div class="warp">
          <div class="sideWarp">
            <div class="title">Virus family :</div>
          </div>
          <div v-loading="fLoading" class="tagWarp">
            <div :class="['tag', n.select ? 'active':'']" v-for="(n, idx) in familyGroups" :key="idx" @click="searchClick(n, 'viralFamily')">{{n.viral_family}}</div>
          </div>
        </div>

        <div class="warp">
          <div class="sideWarp">
            <div class="title">Virus species :</div>
          </div>
          <div v-loading="sLoading" class="tagWarp">
            <div :class="['tag', n.select ? 'active':'']" v-for="(n, idx) in speciesGroups" :key="idx" @click="searchClick(n, 'virusSpecies')">{{n.virus_species}}</div>
          </div>
        </div>
      </div>
    </div>

    <dy-table :loading="dyTableData.loading"
              :list="dyTableData.list"
              :total="dyTableData.total"
              :rnaType="query.rnaType"
              @refreshData="refreshDyData"
              id="dy-table" class="dy-table"
              :key="key" ref="dyTable"/>
  </div>
</template>

<script>
  import {getGroupInfo} from "@/api/browse";
  import {list} from "../api/browse";
  import {isEmpty} from "@/utils/validate";
  import DyTable from "./components/dyTable";

  export default {
    name: "overview",
    components: {DyTable},
    data() {
      return {
        table: null,
        query: {
          pageSize: 10,
          pageNum: 1,
          virusSpecies: {},
          viralGroup: {},
          viralFamily: {},
          rnaType: 'circRNA',
        },
        fLoading: false,
        sLoading: false,
        show: false,
        groupList: [{name: 'ssRNA', select: false}, {name: 'dsRNA', select: false}, {name: 'dsDNA', select: false}, {name: 'ssDNA', select: false}, {name: 'Reverse Transcribing', select: false}
          , {name: 'Unclassified', select: false}],
        familyGroups: [],
        speciesGroups: [],
        key: 0,
        dyTableData: {
          show: false,
          list: [],
          total: 0,
          loading: false,

          params: {
            pageNum: 1,
            pageSize: 10,
          }
        },
        isFristInto: true,
      }
    },
    mounted() {

      this.groupList.some( n => {
        if (this.$route.query.viralGroup == n.name) {
          n.select = true
          this.query.viralGroup = n
          return true
        }
      })

      if (this.isFristInto) {
        this.searchClick(this.groupList[0], "viralGroup")
      }
    },
    methods: {

      resetData() {
        this.dyTableData = {
          show: false,
          list: [],
          total: 0,
          loading: false,

          params: {
            pageNum: 1,
            pageSize: 10,
          }
        }
      },

      async searchClick(n, key) {
        this.key += 1
        this.query[key].select = false
        this.query[key] = n
        n.select = true

        this.dyTableData.show = true

        // 重置表单
        this.resetData()
        if (key === 'viralGroup') {
          this.fLoading = true
          this.familyGroups = []
          this.speciesGroups = []
          this.query.virusSpecies = {}
          this.query.viralFamily = {}
          const res = await getGroupInfo({rnaType: this.query.rnaType, viralGroup: this.query.viralGroup.name})
          res.data.map(n => {
            n.select = false
          })
          this.familyGroups = res.data
          this.fLoading = false

          if (this.isFristInto && this.familyGroups.length > 0) {
            this.searchClick(this.familyGroups[0], "viralFamily")
          }
        }
        else if (key === 'viralFamily') {
          this.sLoading = true
          this.query.virusSpecies = {}
          this.speciesGroups = []
          const res = await getGroupInfo({rnaType: this.query.rnaType, viralGroup: this.query.viralGroup.name, viralFamily: this.query.viralFamily.viral_family})
          res.data.map(n => {
            n.select = false
          })
          this.speciesGroups = res.data
          this.sLoading = false

          if (this.isFristInto  && this.speciesGroups.length > 0) {
            this.searchClick(this.speciesGroups[0], "virusSpecies")
            this.isFristInto = false // 最后一步置为false结束
          }
        }
        else if (key === 'virusSpecies') {
          // this.getDyRnaListData()
        }
        this.getDyRnaListData()
      },

      refreshDyData(pageNum, pageSize) {
        this.dyTableData.params.pageNum = pageNum
        this.dyTableData.params.pageSize = pageSize

        this.getDyRnaListData()
      },
      async getDyRnaListData() {

        this.dyTableData.loading = true
        this.dyTableData.params.viralGroup = this.query.viralGroup.name
        this.dyTableData.params.virusSpecies = this.query.virusSpecies.virus_species
        this.dyTableData.params.viralFamily = this.query.viralFamily.viral_family
        this.dyTableData.params.rnaType = this.query.rnaType

        // if (isEmpty(this.dyTableData.params.viralGroup) ||
        //   isEmpty(this.dyTableData.params.virusSpecies) ||
        //   isEmpty(this.dyTableData.params.viralFamily)) {
        //   this.dyTableData.loading = false
        //   this.dyTableData.show = false
        //   return
        // }

        this.dyTableData.show = true

        const res = await list(this.dyTableData.params)
        if (res) {
          this.dyTableData.total = res.total
          this.dyTableData.list = res.rows;
        }
        this.dyTableData.loading = false

        this.goDyTable()
      },
      goDyTable() {
        this.$nextTick(() => {
          // 实现滚动效果
          let top = document.documentElement.scrollTop
          let endY = document.getElementById("dy-table").offsetTop
          const timeTop = setInterval(() => {
            document.body.scrollTop = document.documentElement.scrollTop = top += 20
            if (top >= endY) {
              clearInterval(timeTop);
            }
          }, 3);
        })
      },
    }
  }
</script>

<style lang="stylus" scoped>

  .main {
    width 1170px
    margin 0 auto
    margin-top 20px
    padding-top 30px

    .top {
      display flex

      .left {
        .titleWarp {
          display flex
          align-items center

          .title {
            font-size 24px
            font-weight 800
            font-family: Times New Roman;
            color #11427D
            margin-right 30px
          }

          img {
            width: 16px;
            height: 14px;
            background color #11427D
          }
        }
      }


      .warp {
        display flex
        font-family: Times New Roman;
        margin-bottom: 20px;
      }

      .right {
        margin-left 60px

        .sideWarp {
          width 240px
          padding-left: 20px;
          margin-right 30px
          flex-shrink: 0;
          .title {
            position: relative;
            font-size 20px
            font-weight 500
            color #0a2458
          }

          .title::before {
            background-color: #aa604f;
            content: "";
            width: 3px;
            height: 100%;
            position: absolute;
            top: 0;
            left: -20px;
            transition: .2s ease;
          }
        }

        .tagWarp /deep/ {
          display flex
          flex-wrap wrap
          width: 100%;

          //设置图标颜色
          .el-loading-spinner .path {
            stroke: #11427D;
          }
          .el-loading-spinner .circular {
            width 25px
            height 25px
          }

          .tag {
            color #989898
            margin-right 20px
            margin-bottom 20px
            font-size 20px
            font-weight 500
            cursor pointer
            /*background #e0e5ef*/
            /*color #0a2458*/
            /*height 36px*/
            /*line-height 36px*/
            /*border-radius 18px*/
            /*text-align center*/
            /*padding 0 20px*/
            /*margin-right 20px*/
            /*margin-bottom 20px*/
          }
          .tag:hover, .active {
            color #0a2458
            text-decoration underline
          }
        }

      }


      .line {
        margin-top 15px
        width 1170px
        height 1px
        background-color #e0e5ef
      }
    }
  }

</style>
